<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
    <link rel="stylesheet" href="../css/common.css">
    <style>
        table{
            border-collapse: collapse;
            margin-left: 10px;
            margin-top: 10px;
        }
        td,th{
            border: 1px solid #eeeeee;
            text-align: center;
            padding: 4px 10px;
        }
        button{
            padding: 0 5px;
        }
        .count{
            width: 50px;
            text-align: center;
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>
                    <input id="ck_all" type="checkbox">全选
                </th>
                <th>名称</th>
                <th>图片</th>
                <th>数量</th>
                <th>价格</th>
                <th>小计</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody id="goods">
            <script id="goods_temp" type="text/html">
            {{each $data item}}
            <tr>
                <td><input class="ck" type="checkbox"></td>
                <td>{{item.name}}</td>
                <td><img src="{{item.img}}"></td>
                <td>
                    <button class="jian">-</button>
                    <input readonly class="count" type="text" value="{{item.count}}">
                    <button class="jia">+</button>
                </td>
                <td class="price">{{item.price}}</td>
                <td class="total_price">{{item.count*item.price}}</td>
                <td>
                    <button class="del">删除</button>
                </td>
            </tr>
            {{/each}}
            </script>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="7" style="text-align: right;">
                    <span>总计：</span>
                    <span id="sum">0</span>
                </td>
            </tr>
        </tfoot>
    </table>
    <script src="./js/artTemplate.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script>
        $.get('./data/goods.json',res=>{
            $('#goods').html(template('goods_temp',res))
        })

        //减按钮点击事件
        $('#goods').on('click','.jian',function(){
            //获取数量
            let count = parseInt($(this).siblings('.count').val())
            count--
            if(count<0) count=0
            $(this).siblings('.count').val(count)
            //获取单价
            let price = parseInt($(this).parent().siblings('.price').text())
            //更新小计
            $(this).parent().siblings('.total_price').text(count*price)
            sumPrice()  //调用计算总计的方法
        })
        //加按钮点击事件
        $('#goods').on('click','.jia',function(){
            //获取数量
            let count = parseInt($(this).siblings('.count').val())
            count++
            $(this).siblings('.count').val(count)
            //获取单价
            let price = parseInt($(this).parent().siblings('.price').text())
            //更新小计
            $(this).parent().siblings('.total_price').text(count*price)
            sumPrice()  //调用计算总计的方法
        })
        //全选复选框点击事件
        $('#ck_all').click(function(){
            //prop()方法，用于获取表单元素的状态属性值
            // console.log($(this).prop('checked'));
            //获取tbody里面的所有ck
            $('#goods .ck').prop('checked',$(this).prop('checked'))
            sumPrice()  //调用计算总计的方法
        })
        //tbody里面的复选框点击事件
        $('#goods').on('click','.ck',function(){
            //定义一个变量，用于表示是否全选
            let isAllChecked = true
            //循环tbody里面所有的复选框
            $('#goods .ck').each(function(index,ck){
                //只要有一个复选框的选中状态为false，就表示没有全选
                if(!$(ck).prop('checked')){
                    isAllChecked = false
                }
            })
            //设置全选复选框的状态
            $('#ck_all').prop('checked',isAllChecked)
            sumPrice()  //调用计算总计的方法
        })
        //删除按钮点击事件
        $('#goods').on('click','.del',function(){
            if(confirm('确认删除吗？')){
                $(this).parents('tr').remove()
                sumPrice()  //调用计算总计的方法
            }
        })
        //计算总计的方法
        function sumPrice(){
            //定义总计
            let sum = 0
            //循环tbody里面所有的复选框
            $('#goods .ck').each(function(index,ck){
                //找出选中状态为true的复选框
                if($(ck).prop('checked')){
                    //累加总计
                    sum += parseInt($(ck).parent().siblings('.total_price').text())
                }
            })
            //更新总计
            $('#sum').text(sum)
        }
    </script>
</body>
</html>